<template>
	<dam-page>
		<dam-scroll-page :headerHeight="(toolbarH+safeAreaTopH)+'px'" :scrollEnable="false" isFixZIndex>
			<template #header>
				<dam-toolbar title="计划查询" fixed :bgColor="themeData['color_toolbar_bg']" @leftClick="leftClick"
					:leftIconColor="themeData['color_toolbar_title']" leftIconClass="damicon damicon-back"
					@rightClick="rightClick">
					<template #right>
						<icon class="ic_right tjicon tjicon-filter" type=""></icon>
					</template>
				</dam-toolbar>
			</template>
			<view class="dam-flex_column v_content">
				<z-paging ref="paging" use-virtual-list @query="searchData" :fixed="false" :auto="false"
					:default-page-size="submitData.pageSize" :show-scrollbar="false">
					<template #cell="{item,index}">
						<view class="list-content">
							<view class="list-item dam-flex_column" @click="itemClick(item)">
								<!-- <text class="item-top-name">{{item.planNo}}</text>
							<jz-content-line class="jz-content-item" title="计划名称" :content="item.planName" spec="small"
								align="end" :titleColor="themeData.color_font_dark" />
							<jz-content-line class="jz-content-item" title="计划状态" :content="item.stateText" spec="small"
								align="end" :titleColor="themeData.color_font_dark" />
							<view class="jz-content-item dam-flex_row time-range">
								<text>{{item.startTime}}</text>
								<text>&#12288;-&#12288;</text>
								<text>{{item.endTime}}</text>
							</view> -->
							</view>
						</view>
					</template>
				</z-paging>
			</view>
		</dam-scroll-page>
	</dam-page>
	<!-- 筛选框 -->
	<uv-popup ref="filterPop" mode="top" round="20rpx" popupClass="pop_filter" z-index="10">
		<view class="gap" :style="{height:('calc('+ toolbarH +'px )')}"></view>
		<view style="width: 100% ">
			<uv-form class="dam-flex_column filter-pop-form" ref="formRef" :model="submitData">
				<uv-form-item class="item-title" label="关键字" labelWidth="auto" borderBottom prop='keyword'>
					<uv-input class="item-content" border="none" v-model="submitData.keyword" placeholder='请输入计划名称/计划编号'
						inputAlign='right'></uv-input>
				</uv-form-item>
				<uv-form-item class="item-title" label="开始时间" labelWidth="auto" borderBottom
					@click="showStartTimesPicker" prop='startTime'>
					<uv-input class="item-content" border="none" v-model="submitData.startTime" placeholder='请选择开始时间'
						inputAlign='right' readonly></uv-input>
					<icon class="tjicon tjicon-enter" type=""></icon>
				</uv-form-item>
				<uv-form-item class="item-title" label="结束时间" labelWidth="auto" borderBottom @click="showEndTimesPicker"
					prop='endTime'>
					<uv-input class="item-content" border="none" v-model="submitData.endTime" placeholder='请选择结束时间'
						inputAlign='right' readonly></uv-input>
					<icon class="tjicon tjicon-enter" type=""></icon>
				</uv-form-item>
				<uv-form-item class="submit-item">
					<text class="dam-btn normal reset-btn" @click="formCancel">重置</text>
					<text class="dam-btn normal search-btn" @click="formSubmit">查询</text>
				</uv-form-item>
			</uv-form>
		</view>
	</uv-popup>
	<uv-datetime-picker ref="startTimePicker" v-model="startTimeValue" mode="datetime" :formatter="formatter"
		@confirm="confirmStartTimeSelect">
	</uv-datetime-picker>
	<uv-datetime-picker ref="endTimePicker" v-model="endTimeValue" mode="datetime" :formatter="formatter"
		@confirm="confirmEndTimeSelect">
	</uv-datetime-picker>
</template>

<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import { useRouter, useRoute } from 'vue-router';
	import { onLoad } from "@dcloudio/uni-app";
	import { storeToRefs } from 'pinia';
	import { getAbilityExector, printLog } from '@/dam_uni_frame/utils/DamApi';
	import { usePageStore } from "@/dam_uni_frame/stores/stores";
	import DamBridge from '@/dam_common/abilitys/DamBridge';
	import DamToolbar from '@/dam_uni_frame/components/view/dam-toolbar.vue'
	import ThemeColorUtil from '@/jzutils/ThemeColorUtil';
	import { dateFormat } from "@/dam_common/utils/DateUtil";
	import JzContentLine from '@/jzcomponents/jz-content-line.vue'
	
	const themeStore = ThemeColorUtil.useThemeStore();
	const { themeData } = storeToRefs(themeStore);
	const pageStore = usePageStore();
	const { toolbarH, safeAreaTopH, contentHWithoutToolbar } = storeToRefs(pageStore);

	const paging = ref();
	const submitData = ref({
		keyword: '',
		startTime: '',
		endTime: '',
		pageNum: 1,//当前页码
		pageSize: 10,//每页显示多少条
	});

	const filterPop = ref();
	const isFilterOpen = ref(false)
	const startTimePicker = ref();
	const endTimePicker = ref();
	const formRef = ref()

	//显示的数据
	const dataList = ref([]);//数据内容
	const startTimeValue = ref(Number(new Date()));//初始化选择框时间
	const endTimeValue = ref(Number(new Date()));//初始化选择框时间

	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		if (type === 'hour') {
			return `${value}时`
		}
		if (type === 'minute') {
			return `${value}分`
		}
		return value
	}

	onMounted(() => {
		loadFirst();
	})
	function searchData(pageNo, pageSize) {
		submitData.value.pageNum = pageNo;
		// getPlanList(submitData.value).then((data) => {
		// 	console.log("---------", data)
		// 	dataList.value = data
		// 	paging.value.complete(data);

		// }).catch((err) => {
		// 	paging.value.complete(null);
		// 	getAbilityExector().showToast(this, err.msg)
		// })
	}

	//加载第一页
	function loadFirst() {
		searchData(1, submitData.value.pageSize);
	}
	//查询条件，开始时间
	function showStartTimesPicker() {
		startTimePicker.value.open();
	}
	function confirmStartTimeSelect(e) {
		let date = new Date(e.value);
		submitData.value.startTime = dateFormat('yyyy-MM-dd HH:mm', date);
		startTimeValue.value = Number(date)
	}
	//查询条件，结束时间
	function showEndTimesPicker() {
		endTimePicker.value.open();
	}
	function confirmEndTimeSelect(e) {
		let date = new Date(e.value);
		submitData.value.endTime = dateFormat('yyyy-MM-dd HH:mm', date);
		endTimeValue.value = Number(date)
	}

	function rightClick() {
		if (isFilterOpen.value) {
			filterPop.value.close()
		} else {
			filterPop.value.open()
		}
		isFilterOpen.value = !isFilterOpen.value
	}
	function leftClick() {
		getAbilityExector().navigateback();
	}

	//查询表单的按钮
	function formSubmit() {
		let start = new Date(submitData.value.startTime);
		let end = new Date(submitData.value.endTime);
		if (start > end) {
			getAbilityExector().showToast(this, "结束时间不能比开始时间早");
			return;
		}
		//todo 开始时间和结束时间判断大小
		formRef.value.validate().then(res => {
			// searchData()
			paging.value.reload(true);
			rightClick();
		}).catch(errors => {

		})
	}

	function formCancel() {
		submitData.value.startTime = '';
		submitData.value.endTime = '';
		submitData.value.keyword = ''
	}
	function itemClick(item) {
		// getAbilityExector().navigateTo({ path: "/subs/jz_admin/pages/plan/planDetail", data: item.id });
	}
</script>

<style lang="scss" scoped>
	@import "/dam_uni_frame/styles/dam_theme_common.scss";
	@import "/static/css/iconfont.css";

	.v_content {
		height: 100%;
		padding-top: $dam-margin3;
	}

	.ic_right {
		color: #1b1b1b;
		padding: 0 $dam-margin2;
	}

	.list-content {
		flex: 1;
		box-sizing: border-box;
		margin: 0 $dam-margin3 $dam-margin3 $dam-margin3;
		padding: $dam-margin3;
		box-sizing: border-box;
		border-radius: $dam-border-radius_card;
		background-color: #ffffff !important; //有个uv-list 背景总显示#fff
	}

	.list-item {
		// padding: $dam-margin2;
		justify-content: flex-start;
		overflow: hidden;
		font-size: $dam-size-font-title1;
	}

	// .jz-content-item {
	// 	margin-top: $dam-margin1;
	// }

	// .item-top-name {
	// 	font-size: $dam-size-font-title3;
	// 	color: v-bind('themeData.color_font_dark');
	// }

	.item-title {
		// flex: 2;
		// width: 30vmin;
		font-size: $dam-size-font-title1;
		color: #83868b;
	}

	.item-content {
		flex: 1;
		font-size: $dam-size-font-title1;
		color: #1b1b1b;

	}

	.pop_filter {
		z-index: $z-index-dialog;
		padding-bottom: $dam-margin4;
		box-sizing: border-box;
	}

	.filter-pop-form {
		// width: 100%;
		padding: $dam-margin2;
		font-size: $dam-size-font-title1;
		color: #1b1b1b;
	}

	.filter-pop-form .submit-item {
		// justify-content: space-between;
		// width: 100%;
		justify-content: space-between;

		.search-btn {
			flex: 1;
			border: 1px solid #3c9cff;
			color: #3c9cff;
		}

		.reset-btn {
			flex: 1;
			border: 1px solid #ecedf3;
			margin-right: $dam-margin3;
		}
	}

	.back-icon {
		padding-right: $dam-margin3;
	}

	.tjicon-filter {
		font-size: $dam-size-font-title4;
	}

	// .time-range {
	// 	justify-content: flex-end;
	// }
</style>